<template>
	<view class="page">
		<!-- <u-navbar
			title=" "
			leftText="返回"
			:placeholder="true"
			:safeAreaInsetTop="true"
			bgColor="#f56c6c"
			leftIconColor="#FFFFFF"
			leftIconSize="42rpx"
			autoBack
			:titleStyle="{color:'#FFFFFF'}"
		>
		</u-navbar> -->
		<!-- 生日祝福消息 -->
		<template v-if="details.mtype==3">
			<view class="full-content">
				<view class="tip-text">
					亲爱的<text class="highlight">{{details.content}}</text>，在这个特别的日子里，感谢您一直以来对我们的支持，方天下国旅全体员工衷心的祝福您生日快乐！
					愿所有的美好和期待都能如期而至！
				</view>
			</view>
		</template>
		<template v-else>
			<view class="content">
				<view class="title flex">{{ details.title }}</view>
				<view class="sendtime flex">{{ $u.timeFormat(details.send_time, 'yyyy年mm月dd日')  }}</view>
				<view class="details">
					<u-parse :content="details.content"></u-parse>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { getMessageDetails } from '@/api/api.js'
	export default {
		data() {
			return {
				details: {}
			};
		}
		,onLoad(options) {
			this.details.id = options.id || 0
			if ( this.details.id > 0 ) {
				this.loadData()
			}
		}
		,methods: {
			loadData() {
				getMessageDetails(this.details.id).then(res => {
					this.details = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
.page {
	.full-content {
		background-image: url('https://www.fangtianxaiguolv.com/public/static/images/happybirthday_tmp_bg.jpg');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top;
		height: calc(100vh - 44px);
		position: relative;
		background-color: #d5eaf0;
		.tip-text {
			width: 550rpx;
			box-shadow: 0px 4px 0px 0px #512776;
			border: 2px solid #512776;
			font-size: 26rpx;
			text-align: left;
			padding: 30rpx 40rpx;
			color: #fff;
			position: absolute;
			bottom: 40rpx;
			left: 60rpx;
			background-color: #fd4483;
			border-radius: 60rpx;
			.highlight {
				color: #fcd088;
				margin-left: 10rpx;
			}
		}
	}
	.content {
		width: 630rpx;
		margin-top: 30rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		.title {
			font-size: 32rpx;
			justify-content: center;
			margin-bottom: 10rpx;
		}
		.sendtime {
			font-size: 24rpx;
			color: #999;
			justify-content: center;
			margin-bottom: 10rpx;
		}
		.details {
			font-size: 26rpx;
			color: #666;
		}
	}
}
</style>
